<template>
    <div>
        <div class="container">
          <div class="handle-box">
            <el-input class="handle-input" v-model="form.org" placeholder="输入班级编号"></el-input>
            <el-input class="handle-input" v-model="form.org" placeholder="输入班级名称"></el-input>
                <el-input class="handle-input" v-model="form.org" placeholder="请选择所在机构">
                    <template #append>
                        <el-select v-model="form.org" style="width: 44px;" :suffix-icon="CaretBottom">
                        <el-option
                            v-for="item in options.organizations"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
             </el-select>
                    </template>
                </el-input>
                <el-input class="handle-input" v-model="form.branch" placeholder="请选择所在分支">
                    <template #append>
                        <el-select v-model="form.branch" style="width: 44px;" :suffix-icon="CaretBottom">
                            <el-option
                            v-for="item in options.branch"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                </template>
                    </el-input>
                <el-input class="handle-input" v-model="form.field" placeholder="请选择所在专业">   
                    <template #append>          
                        <el-select  v-model="form.field" style="width: 44px;" :suffix-icon="CaretBottom">
                            <el-option
                            v-for="item in options.branch"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                </template>   
             </el-input>
             <el-button color="#0ab394" class="handle-btn"  @click="handleSearch">查询</el-button>
          </div>

             <el-table ref="multipleTableRef" 
                :header-cell-style="{color:'#2A62BC'}"
                 :data="tableData"   
                 style="width: 100%;" 
                size="small"
                border
                @selection-change="handleSelectionChange">
                <el-table-column   type="selection" width="35" />
                <el-table-column  prop="id" label="序号"  align="center"></el-table-column>
                <el-table-column  prop="clazzName" label="班级" align="center" ></el-table-column>
                <el-table-column  label="班级综合进度" align="center" >
                    <template #default="scope">
                        <el-progress
                            :text-inside="true"
                            :stroke-width="20"
                            :percentage="scope.row.progress"
                            status="success"
                            color="#0AB394"
                            striped
                            striped-flow
                            
                            />
                    </template>
                </el-table-column>
                <el-table-column label="操作"  align="center" >
                   <template #default="scope">
                      <el-row class="right-btn">
                        <el-tooltip content="详情" placement="bottom" effect="light">
                          <el-button   @click="openDialog(scope.row)" >
                            <i class="iconfont icon-info-circle-fill1 blue"></i>
                         </el-button>   
                        </el-tooltip>       
                      </el-row>
                   </template>
                </el-table-column>
             </el-table>
             <!-- 分页 -->
             <div class="pagination" >
                <el-pagination
                :current-page="query.pageIndex"
                   :page-size="query.pageSize"
                   :page-sizes="[5, 10, 15, 20]"
                   size="small"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="pageTotal"
                   @size-change="handleSizeChange"
                   @current-change="handlePageChange"/>
             </div>
       </div>  
       <el-dialog title="详情" v-model="dialogVisible">
         
         <claCountSub></claCountSub>
       </el-dialog>


          <!-- </div> -->
       </div>
    </template>
    
<script setup >
import { ref, reactive ,toRefs,onMounted} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, CaretBottom } from '@element-plus/icons-vue';
import { getClazzCount} from '../../api/analysis' ;
import claCountSub from './subVue/claCountSub.vue'



 let form = reactive({
        id:'',
        name:'',
        field:'',
        org:'',
        branch:'',
        clazz:''
    });
 
    const options = reactive({
     organizations:[
       {
          value: '青英教育',
          label: '青英教育',
         },
      {
        value: '黑马',
        label: '黑马',
      },
      {
        value: '华清远见',
        label: '华清远见',
      },
      {
        value: '达内教育',
        label: '达内教育',
      },
      ],
      branch:[{
        value: '前端',
        label: '前端',
         },
      {
        value: '后端',
        label: '后端',
      },
      {
        value: '架构',
        label: '架构',
      },
      {
        value: 'UI',
        label: 'UI',
      },],
      
      majors:[{
        value: 'c++',
        label: 'c++',
         },
      {
        value: 'java',
        label: 'java',
      },
      {
        value: 'Mysql',
        label: 'Mysql',
      },
      {
        value: 'Oracle',
        label: 'Oracle',
      },],
     
      
    }
    )
       
    //分页字体
    const small = ref(true)
    // const size = ref<'default' | 'large' | 'small'>('default')
    
    //分页数据
    const query = reactive({
       pageIndex: 1,
       pageSize: 5,
    });
    //
    
    //表格数据
    const tableData = ref();
    //总页数
    const pageTotal = ref(0);
    const multipleTableRef = ref()
    const state = reactive({
       multipleSelection:[]
    })
    
    // 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
    const getData = () => {
        getClazzCount({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
            console.log(res,"---res---")
            // tableData.value = res.data.
          let start  = (query.pageIndex-1)*query.pageSize;//开始位置
            let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
            tableData.value = res.data.slice(start,end);
            // tableData.value = res.data;
            pageTotal.value = res.data.length
        })
    };
    getData();
    //多选框权限
    const handleSelectionChange = (val) => {
      state.multipleSelection = val
    }
    // 分页导航
    const handleSizeChange = (val) => {
      // console.log(`${val} items per page`)
      query.pageSize = val;
      getData()
    }
    const handlePageChange = (val) => {
       query.pageIndex = val;
       console.log(val,"==")
       console.log(query.pageSize)
       getData()
    };
    
 
    // 查询操作  to... 需要自己实现与后台交互
    const handleSearch = () => {
       query.pageIndex = 1;
       getData();
    };
    


   // 弹出框
   const  dialogVisible = ref(false)
   const openDialog=(row)=>{
      dialogVisible.value=true
   }



    </script >
    <style lang="less" scoped>
    .handle-box {
       margin-bottom: 20px;   
       .handle-btn{
          margin-left: 8px;
       }    
    }   
    .handle-input {
       width:196px;
        margin-right: 8px;
    }
    
    .red {
       color: #F56C6C;
    }
    .blue {
       color: #1296e2;
       font-weight: bold;
    }
    
    .top-btn{
       float: right;
       .el-button{
          margin-left: 5px;
       }
    }
    .right-btn{
        justify-content:center;
       .el-button{
          height: 22px;
          // width: 60px;
          margin-right: 10px;
          padding: 1px 5px;
       }
    }
    
    
    </style>